<template>
    <div class="password-input">
        <div class="pwd_frame">
            <input type="tel" maxlength="6" id="pwd_input" v-model="code"/>
            <div v-for="(item, index) in figure" :key="index" class="pwd_circle">
                <span :class="{pwdShow:item===1,pwdHide:item===0}"></span>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                code: '',
                figure: [0, 0, 0, 0, 0, 0],
                focusStatus: this.isFocus
            };
        },
        props:{
            isFocus: {
                type: Boolean,
                default:true
            }
        },
        methods: {
            clearCode() {
                this.code = '';
            },
            focus(){
                setTimeout(() => {
                    document.getElementById('pwd_input').focus()
                },500)
            }
        },
        watch: {
            code(val) {
                this.figure = [0, 0, 0, 0, 0, 0];
                for (let i = 0; i < val.length; i++) {
                    this.$set(this.figure, i, 1);
                }
                this.$emit('inputCode', val);
            }
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .pwd_frame {
        width 70vw
        letter-spacing -0.5em
        margin auto
        position relative
        text-align center
        border-top 1px solid #F5F5F5
        padding-top smallMargin
        & input{
            position absolute
            width 61.3vw
            height 10.5vw
            /*color #000*/
            -webkit-box-sizing border-box
            box-sizing border-box
            font-size 1px
            opacity 0
            z-index 9999
        }
        & .pwd_circle {
            background-color #F5F5F5
            display inline-block
            vertical-align middle
            width 10vw
            height 10vw
            text-align center
            margin-left titleMargin
            border-radius main-radius
            & span {
                width 7px
                height 7px
                border-radius main-radius
                background #000
                display block
                margin 4vw auto
                &.pwdShow{
                    opacity 1
                }
                &.pwdHide{
                    opacity 0
                }
            }
        }
    }
</style>
